<template>
  <el-card shadow="never"
           body-style="padding: 14px 5px 0 0;">
    <div slot="header"
         class="flex-between">
      <span>技师数据统计</span>
      <div>
        <!-- <div
          :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]"
        >
          <el-radio-group size="small" @input="todayFn" v-model="labelStatus">
            <el-radio-button :label="0">今天</el-radio-button>
            <el-radio-button :label="1">近七天</el-radio-button>
          </el-radio-group>
        </div>
        <div
          :class="[
            'ele-inline-block',
            { 'hidden-sm-and-down': styleResponsive }
          ]"
          style="width: 260px; margin-left: 10px"
        >
          <el-date-picker
            unlink-panels
            type="daterange"
            class="ele-fluid"
            @change="selsectTime"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            v-model="datetime"
            range-separator="至"
            size="small"
          />
        </div> -->
      </div>
    </div>
    <v-chart ref="visitHourChart"
             style="height: 323px"
             :option="visitHourChartOption" />
    <!-- <el-empty :image-size="119" v-else description="暂无数据"></el-empty> -->
  </el-card>
</template>

<script>
import { jstjTechnicianInfo } from '@/api/financialManagement/index';
import { time, use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import { getVisitHourList } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';
import moment from 'moment';
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  components: { VChart },
  mixins: [echartsMixin(['visitHourChart'])],
  data () {
    return {
      // 最近1小时访问情况折线图配置
      visitHourChartOption: {},
      datetime: [],
      form: {
        siteId: this.$store.state.site.info.id,
        createDate: null,
        createTimeStart: null,
        createTimeEnd: null
      },
      // 当天时间的实例
      currentMoment: null,
      labelStatus: 0,
      // 数据统计
      hourData: []
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    // this.todayFn(0)
    this.getVisitHourData();
  },
  methods: {
    selsectTime (timeArr) {
      console.log(timeArr);
      this.form.createTimeStart = timeArr[0];
      this.form.createTimeEnd = timeArr[1];
      this.form.createDate = null;
      this.labelStatus = null;
      this.getVisitHourData();
    },
    // 获取当天
    todayFn (val) {
      console.log(val);
      if (val) {
        this.currentMoment = moment();
        const currentDate = this.currentMoment.format('YYYY-MM-DD');
        console.log(currentDate);
        // 减去一天的时间
        this.currentMoment.startOf('day');
        const previousDate = this.currentMoment.subtract(7, 'days');

        // 格式化为指定的字符串格式（YYYY-MM-DD HH:mm:ss）
        const formattedDate = previousDate.format('YYYY-MM-DD');
        console.log(formattedDate);
        this.form.createTimeStart = currentDate;
        this.form.createTimeEnd = formattedDate;
        this.form.createDate = null;
        this.getVisitHourData();
      } else {
        this.currentMoment = moment();
        this.currentMoment.startOf('day');

        const currentDate = this.currentMoment.format('YYYY-MM-DD');
        console.log(currentDate);
        (this.form.createDate = currentDate),
          (this.form.createTimeStart = null);
        this.form.createTimeEnd = null;
        this.getVisitHourData();
      }
    },

    /* 获取最近1小时访问情况数据 */
    getVisitHourData () {
      jstjTechnicianInfo(this.form)
        .then((data) => {
          this.hourData = data;
          this.visitHourChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['技师收益', '新增技师', '技师提现'],
              right: 20
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: data.map((d) => d.createDate)
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '新增技师',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.map((d) => d.addTechnician)
              },
              {
                name: '技师收益',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.map((d) => d.moneyTotal)
              },
              {
                name: '技师提现',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.map((d) => d.withdrawAmountTotal)
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.titleCard {
  &::before {
    content: url('../../../../static/svg/technicianStatistics.svg');
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    padding-left: 9px;
  }
}
</style>
